<template>
    <div class="box">
        <div class="header">
            <van-search v-model="value" placeholder="请输入搜索关键词" />
        </div>
        <div class="meddle">
            <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="items" style="height: 100%;" />
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const activeId = ref(1);
const activeIndex = ref(0);
const items = [
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 4 },
            { text: 'oppea5', id: 5 },
            { text: 'oppea6', id: 6, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 7 },
            { text: 'oppea5', id: 8 },
            { text: 'oppea6', id: 9, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 10 },
            { text: 'oppea5', id: 11 },
            { text: 'oppea6', id: 12, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },

    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
    {
        text: 'oppe',
        children: [
            { text: 'rem12', id: 1 },
            { text: 'oppea5', id: 2 },
            { text: 'oppea6', id: 3, disabled: true },
        ],
    },
];
</script>